Loading...

Tämä sivusto

Ihan ensimmäiseksi pitää sanoa että laita random musiikki soimaan viereisestä play napista. Siitä lähtee soimaan jokin setti musiikki kategorian postauksista.

Miksi

Olen jo pidemmän aikaa ajatellut että tarvitsen sivuston mihin kerään kaikkea mitä sitä on tullut vuosien varrella tehtyä. Asioita meinaa unohtua niin jonkunlainen tietokanta on hyvä olla. Aloitin näiden sivujen tekemisen jo vuosi sitten kun halusin kokeilla taustalla näkyvän taustakuvan tekemistä, mutta sitten näiden sivujen tekeminen jäi kun piti tehdä intensiivisesti muita projekteja.

Tastakuva

Taustakuva on rakennut div elementeistä ja jos tuolta alhaalta klikkaa jotain laatikkoa niin siitä lähtee satunnaiseen suuntaan piste noita viivoja pitkin. Tuo piste on vain div jolla on CSS gradienttivarjo jotta se näyttää hienolta. Webkit selaimella se vaan meinaa kaataa koko selaimen ja Firefoxilla se toimii mainiosti, ainakin minulla.

Tekniikoita

Taustakuvaa rakentaessa testailin että miten käytetään stimulus kontrollereita sekä turboa jotta sivustosta saa tehtyä yhden sivun applikaation. Taustalla tässä toimii symfony ja sisällön hallinnan rakentamiseen käytän sonataa. Tietokanta on mariadb. Näitä pyörittelen docker konteissa.

Koodia

Tässä vielä tuon ylemmän kulman taustakuvan sensuroimaton koodi. Huomautan vielä kerran että tein tämän vuonna 2021. Tietenkin tämän lisäksi olen käyttänyt paljon SCSS. Haluaakohan joku nähdä sen? laita mailia :)

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["plane", "cells"];
  initialize() {
    this.BuildGrid();
    this.addAndRemoveSquare();
  }
  BuildGrid() {
    this.makeRows(25, this.planeTarget);
    this.makeColumns(25);
  }
  //Takes (rows, columns) input and makes a grid
  makeRows(rowNum, el) {
    //Creates rows
    for (var r = 0; r < rowNum; r++) {
      let row = document.createElement("div");
      el.appendChild(row).className = "BgridRow";
    }
  }
  //Creates columns
  makeColumns(cellNum) {
    let rows = document.getElementsByClassName("BgridRow");
    let count = 0;
    for (var j = 0; j < cellNum; j++) {
      for (var i = 0; i < rows.length; i++) {
        let newCell = document.createElement("div");
        newCell.setAttribute("data-bgrid-target", "cells");
        newCell.setAttribute("data-bgrid-id-param", count);
        newCell.setAttribute("data-action", "click->bgrid#cellClick");
        rows[j].appendChild(newCell).className = "cell";
        count++;
      }
    }
  }
  connect() {
    //console.log(this.cellsTargets)
  }
  createDivDot(id) {
    let cell = this.cellsTargets[id];
    let direction = Math.floor(Math.random() * 4);
    let allowRight = true;
    let allowLeft = true;
    let allowUp = true;
    let allowDown = true;
    let rowId = id % 100;
    if (rowId >= 50) {
      // scale row numbers
      rowId = rowId - 50;
    }
    if (rowId < 25) {
      // only allow right direction
      allowLeft = false;
      allowUp = false;
      allowDown = false;
    }
    //console.log(allowRight, allowLeft, allowUp, allowDown )
    if (direction === 0 && allowRight) {
      this.moveDot(cell, "Right");
    } else if (direction === 1 && allowUp) {
      this.moveDot(cell, "Up");
    } else if (direction === 2 && allowDown) {
      this.moveDot(cell, "Down");
    } else if (direction === 3 && allowLeft) {
      this.moveDot(cell, "Left");
    }
  }
  moveDot(cell, dir) {
    let mclass = "move" + dir;
    let dot = document.createElement("div");
    dot.className = "dot";
    cell.appendChild(dot);
    void dot.offsetHeight;
    dot.classList.add(mclass);
    setTimeout(() => {
      cell.removeChild(dot);
    }, 3100);
  }
  createSVGDot(id) {
    const svgns = "http://www.w3.org/2000/svg";
    let svg = document.createElementNS(svgns, "svg");
    svg.setAttribute("fill", "none");
    svg.setAttribute("viewBox", "0 0 10 10");
    svg.setAttribute("stroke", "none");
    let rect = document.createElementNS(svgns, "rect");
    rect.setAttribute("x", 0);
    rect.setAttribute("y", 0);
    rect.setAttribute("width", "10px");
    rect.setAttribute("height", "5px");
    rect.setAttribute("fill", "#ff00ff");
    svg.appendChild(rect);
    id.appendChild(svg);
  }
  addAndRemoveSquare() {
    if (!document.hidden) {
      let activate_cell_number = Math.floor(
        Math.random() * this.cellsTargets.length
      );
      let deactivate_cell_number = Math.floor(
        Math.random() * this.cellsTargets.length
      );
      this.cellsTargets[activate_cell_number].className = "cell active";
      this.cellsTargets[deactivate_cell_number].className = "cell";
      //this.createDivDot(deactivate_cell_number);
      var timer = setTimeout(() => {
        this.addAndRemoveSquare();
        //console.log('addSquare')
      }, 4000);
    } else {
      console.log("stop animations");
      clearInterval(timer);
    }
  }

  cellClick({ params: { id } }) {
    //this.createSVGDot(this.cellsTargets[id+3]);
    this.createDivDot(id);
    // console.log(id);
  }
}